<template>
  <view class="cropper-wrapper">
    <canvas
      class="cropper"
      disable-scroll="true"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd"
      :canvas-id="cropperOpt.id"
      :style="{width:width+'px',height:height+'px'}"
    ></canvas>
    <view class="cropper-buttons">
      <view class="upload" @click="uploadTap">重新选择</view>
      <view class="getCropperImage" @click="getCropperImage">确定</view>
    </view>
  </view>
</template>
<script>
import weCropper from "../common/js/weCropper.js";
let APP = getApp();
// #ifdef H5
    document.title=`顾问详情`
// #endif
export default {
  data() {
    var pages;
    const device = uni.getSystemInfoSync();
    console.log(device);
    const width = device.windowWidth;
    const height = device.windowHeight - 50;
    return {
      cropperOpt: {
        id: "cropper",
        width,
        height,
        scale: 0,
        zoom: 16,
        cut: {
          x: (width - 246) / 2,
          y: (height - 138) / 2,
          width: 246,
          height: 138
        }
      },
      width,
      height,
      pages,
      avatar: "",
      url: ""
    };
  },
  onLoad(option) {
    (this.url = "/pages/" + option.url + "/" + option.url),
      (this.trigger = option.trigger || "");
    // do something
    const { cropperOpt } = this;
    const { src } = option;
    if (src) {
      Object.assign(cropperOpt, {
        src
      });

      new weCropper(cropperOpt)
        .on("ready", function(ctx) {})
        .on("beforeImageLoad", ctx => {
          uni.showToast({
            title: "上传中",
            icon: "loading",
            duration: 3000
          });
        })
        .on("imageLoad", ctx => {
          uni.hideToast();
        });
    }
    // console.log(getCurrentPages());
  },
  onShow() {
    this.pages = getCurrentPages();
  },
  methods: {
    touchStart(e) {
      this.wecropper.touchStart(e);
    },
    touchMove(e) {
      this.wecropper.touchMove(e);
    },
    touchEnd(e) {
      this.wecropper.touchEnd(e);
    },
    getCropperImage() {
      let _that = this;
      _that.wecropper.getCropperImage(avatar => {
        if (avatar) {
          //  获取到裁剪后的图片
          //   var prevPage = this.pages[this.pages.length - 2]; //上一个页面
          //   (_that.avatar = avatar), (_that.change = 1);
          //   console.log(_that.trigger)
          //   if (_that.trigger) {
          //     prevPage[_that.trigger]();
          //   }
          APP.globalData.avatar = avatar;
          console.log(avatar);
          uni.navigateBack();
        } else {
          console.log("获取图片失败，请稍后重试");
        }
      });
    },
    uploadTap() {
      var self = this;
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera "], //album从相册选择-camera相机拍摄F
        success: function(res) {
          let src = res.tempFilePaths[0];
          //  获取裁剪图片资源后，给data添加src属性及其值
          self.wecropper.pushOrign(src);
        }
      });
    }
  }
};
</script>


<style lang="less" scoped>
.cropper {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

.cropper-buttons {
  background-color: rgba(0, 0, 0, 0.95);
  color: #04b00f;
}

.cropper-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  background-color: #e5e5e5;
}

.cropper-buttons {
  width: 100vw;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  line-height: 50px;
  font-size: 30upx;
}

.cropper-buttons .upload,
.cropper-buttons .getCropperImage {
  width: 50%;
  text-align: center;
}
</style>
